<template>
  <em
    class="svg-icon"
    v-html="iconHtml"
    :style="{ width: width, height: height, fill: color, stroke: strokeColor }"
  ></em>
</template>
<script setup>
import { toRefs, computed } from "vue";
import svgIcon from "./svgIcon";
const props = defineProps({
  name: {
    type: String,
  },
  width: {
    type: String,
    default: "24px",
  },
  height: {
    type: String,
    default: "24px",
  },
  color: String,
  strokeColor: String,
});
const { name, width, height, color,strokeColor } = toRefs(props);
const iconHtml = computed(() => (svgIcon[name.value] ? svgIcon[name.value] : ""));
</script>
<style scoped>
.svg-icon {
  display: block;
  text-align: center;
}
.svg-icon > svg {
  width: 100% !important;
  height: 100% !important;
  top: auto !important;
  fill: inherit;
}
svg.icon {
  top: 0;
}
</style>
